<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      height: 2000px;
      display: flex;
      flex-direction: column;
    }

    .top {
      height: 200px;
      text-align: center;
      overflow: hidden;
    }

    button {
      padding: 10px 20px;
      font-size: 20px;
      cursor: pointer;
    }

    .content {
      flex: 1;
      background-color: orange;
      display: flex;
    }

    .content .left {
      display: flex;
      flex: .8;
      justify-content: space-between;
      align-items: start;
      flex-wrap: wrap;
      background-color: skyblue;
      padding: 10px;
      box-sizing: border-box;
      padding-bottom: 1200px;
    }

    .content .item {
      display: inline-block;
      height: 30px;
      border: 1px solid #000;
      padding: 4px;
      line-height: 30px;
      border-radius: 10px;
      transition: 0.3s;
      cursor: pointer;
      margin-right: 10px;
    }

    .content .item:hover {
      box-shadow: 0 0 10px gray;
      transform: translateY(-4px);
      color: white;
      font-weight: 900;
    }

    .content .right {
      flex: 1;
      background-color: pink;
    }
  </style>
</head>

<body>
  <div class="top">
    <h2>⭐️幸运星⭐️</h2>
    <button>开始</button>
  </div>
  <div class="content">
    <div class="left">
      <!-- <div class="item">
        某同学-0次
      </div> -->
    </div>
    <div class="right"></div>
  </div>
  <script src="./lib/echarts.min.js"></script>
  <script>
    //声明全局数据，用于柱状图
    let HMStudents = [
      { "id": 1, "name": "雷源", "count": 0 },
      { "id": 2, "name": "张治成", "count": 0 },
      { "id": 3, "name": "何意清", "count": 0 },
      { "id": 4, "name": "赵长涛", "count": 0 },
      { "id": 5, "name": "杨秀红", "count": 0 },
      { "id": 6, "name": "冯德军", "count": 0 },
      { "id": 7, "name": "郭子豪", "count": 0 },
      { "id": 8, "name": "钟锦枫", "count": 0 },
      { "id": 9, "name": "罗鑫", "count": 0 },
      { "id": 10, "name": "王涛", "count": 0 },
      { "id": 11, "name": "李明阳", "count": 0 },
      { "id": 12, "name": "孟维骏", "count": 0 },
      { "id": 13, "name": "熊俊杰", "count": 0 },
      { "id": 14, "name": "何颖", "count": 0 },
      { "id": 15, "name": "张文蕾", "count": 0 },
      { "id": 16, "name": "毕平威", "count": 0 },
      { "id": 17, "name": "叶德尧", "count": 0 },
      { "id": 18, "name": "李玉生", "count": 0 },
      { "id": 19, "name": "欧阳吉英", "count": 0 },
      { "id": 20, "name": "刘文龙", "count": 0 },
      { "id": 21, "name": "邢梦婷", "count": 0 },
      { "id": 22, "name": "苏琳琪", "count": 0 },
      { "id": 23, "name": "丁莉清", "count": 0 },
      { "id": 24, "name": "林清旺", "count": 0 },
      { "id": 25, "name": "黄陶珏", "count": 0 },
      { "id": 26, "name": "陈香", "count": 0 },
      { "id": 27, "name": "刘春敏", "count": 0 },
      { "id": 28, "name": "曾茂林", "count": 0 },
      { "id": 29, "name": "李海鹏", "count": 0 },
      { "id": 30, "name": "黄志炜", "count": 0 },
      { "id": 31, "name": "利冰", "count": 0 },
      { "id": 32, "name": "杨兴", "count": 0 },
      { "id": 33, "name": "杨文娟", "count": 0 },
      { "id": 34, "name": "舒金涛", "count": 0 },
      { "id": 35, "name": "邱烈阳", "count": 0 },
      { "id": 36, "name": "王亚楠", "count": 0 },
      { "id": 37, "name": "王华超", "count": 0 },
      { "id": 38, "name": "肖博文", "count": 0 },
      { "id": 39, "name": "李永琴", "count": 0 },
      { "id": 40, "name": "黄菲", "count": 0 },
      { "id": 41, "name": "刘建瑞", "count": 0 }
    ]


    //页面一打开就渲染所有学生列表
    async function randerStu() {
      dataName = HMStudents.map(v => v.name)
      dataCount = HMStudents.map(v => v.count)
      // console.log(dataName)
      // console.log(dataCount)
      document.querySelector('.left').innerHTML = HMStudents.map(v => `
        <div class="item">
          ${v.name}-${v.count}次
        </div>
        `).join('')
    }
    randerStu()

    //页面一打开就渲染右侧排序
    function randerRank() {
      // 生成图形
      var myChart = echarts.init(document.querySelector('.right'))
      const option = {
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: dataName,
          inverse: true
        },
        series: [
          {
            realtimeSort: true,
            data: dataCount,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            label: {
              show: true,
              position: 'right',
              valueAnimation: true
            }
          }
        ],
        grid: {
          top: '1%',
          left: '3%',
          bottom: '3%',
          containLabel: true
        },
        // 动画配置
        animationDuration: 0, // 初始化动画的时长
        animationDurationUpdate: 200, // 数据更新动画的时长
        animationEasing: 'linear', // 初始化动画的缓动函数
        animationEasingUpdate: 'linear' // 数据更新动画的缓动函数
      }
      myChart.setOption(option)
    }
    randerRank()

    function startLottery() {
      let total = 0
      const lotteryInterval = setInterval(() => {
        const randomIndex = Math.floor(Math.random() * HMStudents.length);
        const student = HMStudents[randomIndex];

        student.count++;
        total++
        console.log(student);
        randerStu()
        randerRank()
        if (total >= 100) {
          clearInterval(lotteryInterval);
        }
      }, 40);
    }

    // 给开始按钮加点击事件
    document.querySelector('.top>button').addEventListener('click', function () {
      startLottery()
    })

  </script>
</body>

</html>